<template>
	<view>
		<view class="flex ptb5 plr10" v-if="!disabled && title">
			<view v-if="title">{{title}}</view>
			<view class="gray" v-if="_max > 0">
				{{listSync.length}}/{{_max}}
			</view>
		</view>
		<view class="grid g4">
			
			<view class="father" v-for="( item , index) in listSync" :key="index">
				<view class="square" @tap="preview(item)">
					<image :src="item" mode="aspectFill" class="bd rds4"></image>
				</view>
				<view class="top right abs pr5" @tap="remove(index)" v-if="!disabled">
					<view class="sIcon-multiply plr5 blackBg fz12 op8" style="border-bottom-left-radius: 8px;"></view>
				</view>
			</view>
			
			<view @tap="toUploadImage" v-if="listSync.length < _max && !disabled">
				<view class="square">
					<view class="grayBg flex ct rds4 grey fz24">
						<view class="sIcon-photoFill"></view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {Qiniu} from "../../common/upload.js" ;
	export default {
		name:"upload-img",
		props:{
			disabled : Boolean ,
			title : String ,
			max : {
				type : [String , Number] ,
				default : 9
			},
			value:{
				type : [String,Array] ,
				default(){
					return [] 
				}
			}
		},
		data(){
			return {
				listSync : []
			}
		},
		computed:{
			_max(){
				return Number(this.max);
			}
		},
		watch:{
			value:{
				handler(v){
					if (v === this.listValue) {
						return ;
					}
					this.listSync = this.parseArray(v) ;
				},
				immediate : true 
			},
			listValue(){
				return JSON.stringify(this.listSync) ;
			}
		},
		methods:{
			parseArray(list){
				if (!list) {
					return [] ;
				}
				if (Array.isArray(list)) {
					return list ;
				}
				if (Object.prototype.toString.call(list) === '[object String]' ) {
					return JSON.parse(list);
				}
				return [] ;
			},
			toUploadImage:function(key){
				var sourceTypes = ["album", "camera"];
				uni.showActionSheet({
					itemList:["从相册选择","从相机拍照"],
					success : res => {
						uni.chooseImage({
							sourceType:[sourceTypes[res.tapIndex]],
							count:20,
							success: res =>{
								uni.showNavigationBarLoading();
								let max = this.max - this.listSync.length ;
								for (var i = 0; i < res.tempFilePaths.length; i++) {
									let filePath = res.tempFilePaths[i] ;
									if (i + 1 > max) {
										uni.hideNavigationBarLoading();
										break ;
									}
									let qiniu = new Qiniu();
									qiniu.upload( filePath , url =>{
										this.listSync.push(url);
										this.$emit("change" , {url});
										this.$emit("input" , this.listSync );
										uni.hideNavigationBarLoading();
									});
								}
							}
						});
					}
				});
			},
			
			remove(index){
				this.listSync.splice(index,1);
				this.$emit("input" , this.listSync );
			},
			
			preview(item){
				uni.previewImage({
					current:item,
					urls:this.listSync
				})
			}
		}
	}
</script>
